import Vue from "vue"
import VueRouter from "vue-router"
import discover from "@/pages/discover"
import friend from "@/pages/friend"
//将VueRouter注入到所有的Vue子组件

Vue.use(VueRouter)

//路由配置routes

//配置路由3个步骤

//1.创建页面组件

//2.配置rotes,一个数组,数组中每个对象基本属性path,component

//3.将router-view路由视图组件放到正确的位置

//路由懒加载(按需加载),主要通过import()这种语法,vue-cli是基于webpack,webpack编译的时候,遇到了import()这种语法,就会自动的将代码进行分割,split-code,实现懒加载的核心就是使用webpack的代码分割功能

//路由懒加载的好处:提高首屏的加载速度,提升用户体验,节省流量

//动态路由:就是通过切换路径,来达到传递参数的目的

let routes = [
    {
        path: "/",
        component: () => import("@/pages/cartPage")
    },
    {
        path: "/discover",
        component: discover,
        //重定向
        redirect: "/discover/playlist",
        children: [
            {
                //children中选项的path最前面不能加 "/"
                path: "playlist",
                component: () => import("@/pages/discover/playlist"),
                name: 'playlist'
            },
            {
                path: "djradio",
                component: () => import("@/pages/discover/djradio")
            }
        ]
    },
    {
        path: "/friend/:id",
        component: friend
    },
    {
        path: "/mine",
        component: () => import(/*webpackChunkName:'mine'*/"@/pages/mine"),
        //具名路由
        name: 'mine'
    },
    {
        path: "/list",
        component: () => import("@/pages/list")
    },
    {
        path: "/detail/:productid",
        //路由参数解耦合
        props: true,
        component: () => import("@/pages/detail")
    },
    {
        path: "*",
        component: () => import("@/pages/page404")
    }
];

//实例化vue路由

let router = new VueRouter({
    mode: "hash",
    routes
})

export default router